<!-- 搜索 -->
<template>
    <div class="search" ref="list-main" @scroll="scrollLoad()">
        <div class="search-main">
            <!-- 搜索框 -->
            <div class="search-box clearfix">
                <div class="search-input left">
                    <input type="text" class="" placeholder="搜索你想要的图书" v-model="keyWord"  maxlength="20">
                    <span v-show="keyWord!=''" @click="searchClean()"></span>
                </div>
                <div class="right" @click="searchClick()">搜索</div>
            </div>
            <!-- 列表 -->
            <ul class="search-list">
                <li class="clearfix shadow1" v-for="(item,index) in searchList" :key="index" @click="goDetail(item)">
                    <img class="search-img left" :src="item.bookCover" alt="">
                    <div class="search-con left">
                        <h4 v-html="addKeyWord(item.bookName)"></h4>
                        <p>{{item.gradeName}} · {{item.bookCountry}} · {{item.bookAuthor}}</p>
                        <p>{{item.bookDescribe}}</p>
                    </div>
                </li>
            </ul> 
            <transition name='fade'>
                <div class="no-con" v-show="noConShow">
                    <img src="@/assets/img/no-con.png" alt="">
                    <p>没有找到相关图书...</p>
                </div>
            </transition> 
            <div class="bottom-tips">{{bottomTip}}</div>  
        </div>
    </div>
</template>

<script>
import { axGet,axPost } from '@/api/index'

export default {
    name: "search",
    data(){
        return{
            keyWord:'',   //搜索关键词
            searchList:[],//搜索列表
            // 分页
            noConShow:false,
            listPage:1,
            totalPage:1,
            bottomTip:'',
            isLoading:true,
        }
    },
    watch:{
        // keyWord(newVal,oldVal){
        //     let regu=/^\s*$/g;
        //     if(newVal && !regu.test(newVal)){
        //         this.getBookList(1)
        //     }
        // },
    },
    created(){ 
        this.$parent.menuShow=false;

        /****** 验证登录 *****/ 
        if(!sessionStorage.getItem("myInfo")){
            this.$router.replace({path:'/',query: {}});
        }
       
    },
    mounted(){
    },
    methods:{
        //去详情
        goDetail(item){
            sessionStorage.setItem("thisBook",JSON.stringify(item))
            this.$router.push({path:'/bookDetail',query: {bookid:item.bookId}});
        },
        //搜索
        searchClick(){
            let regu=/^\s*$/g;
            if(!this.keyWord || regu.test(this.keyWord)){
                 this.$LayerTip({
                    content:"请输入要搜索的图书",
                    time:1500,
                });
            }else{
                // this.keyWord=''
                this.searchList=[]
                this.listPage=1
                this.totalPage=1
                this.bottomTip=''
                this.isLoading=true
                this.noConShow=false
                this.getBookList(1)
            }
        },
        searchClean(){
            this.keyWord=''
            this.searchList=[]
            this.noConShow=false
        },
        //搜索列表请求
        getBookList(page){
            console.log(this.keyWord)
            let seachKey=this.keyWord.replace(/\s+/g, "")
            axGet('GetHRBookList', {
                PageIndex: page,
                PageSize:10,
                seachKey:seachKey,
            }).then(res => {
                if(res.ResultCode==1){
                    let listJson=res.Value.list;
                    listJson.forEach((item,i)=>{ 
                        if(item.grade==1){
                            item.gradeName='一年级'
                        }else if(item.grade==2){
                            item.gradeName='二年级'
                        }else if(item.grade==3){
                            item.gradeName='三年级'
                        }else if(item.grade==4){
                            item.gradeName='四年级'
                        }else if(item.grade==5){
                            item.gradeName='五年级'
                        }else if(item.grade==6){
                            item.gradeName='六年级'
                        }
                        this.searchList.push(item)
                    })
                    if(page==1){
                        this.totalPage=res.Value.pageCount
                        this.searchList.length==0 ? this.noConShow=true : this.noConShow=false
                    }
                    if(page<this.totalPage){
                        this.bottomTip='上拉加载更多'
                    }else{
                        this.bottomTip=''
                    }

                }
            })
        },
        addKeyWord(keystr){
            var restr = keystr.replace(this.keyWord,"<span style='color:#02affe;'>"+this.keyWord+"</span>")
            //console.log("keystr2="+keystr)
            return restr
        },
        // 滚动加载   
        scrollLoad(){
            let bodyH = this.$refs['list-main'].clientHeight;
            let scrollH = this.$refs['list-main'].scrollTop;
            let listH = this.$refs['list-main'].scrollHeight;
            console.log(bodyH,scrollH,listH)
            if(scrollH+bodyH+100>listH && this.isLoading){
                this.isLoading=false
                this.bottomTip='努力加载中...'
                // console.log(this.totalPage)
                this.listPage=this.listPage+1;
                if(this.listPage<this.totalPage || this.listPage == this.totalPage){
                    let page=this.listPage;
                    this.getBookList(page)
                }else{
                    if(this.searchList.length>0){
                        this.bottomTip='到达世界的边缘咯...'
                        console.log('没有更多数据')
                    }else{
                        this.bottomTip=''; 
                    }
                    
                }
                
            }
            
        },
        
    }
}
</script>
<style type="text/css" scoped>
.search{
    width: 100%;
    height: 100%;
    overflow: scroll;
}
.search-main{
    padding: 0.2rem 0.32rem;
}
.search-box{
    padding-bottom: 0.5rem;
}
.search-input{
    background: #f3f5f7 url(../../assets/img/icon/search.png) no-repeat 0.2rem center;
    background-size: 0.4rem 0.4rem; 
    color: #ccc;
    font-size: 0.3rem;
    
    border-radius: 0.38rem;
    padding:0 0.6rem 0 0.8rem;
    box-sizing: border-box;
    width: 5.9rem;
    position: relative;
}
.search-input input{
    width: 100%;
    background: transparent;
    height: 0.7rem;
    line-height: 0.7rem;
    font-size: 0.3rem;
}
.search-input input::-webkit-input-placeholder{
    color: #ccc;
}
.search-input input::-moz-placeholder{
    color: #ccc;
}
.search-input input:-moz-placeholder{
    color: #ccc;
}
.search-input input:-ms-input-placeholder{
    color: #ccc;
}
.search-input span{
    height: 0.7rem;
    width: 0.36rem;
    background: #f3f5f7 url(../../assets/img/icon/clean.png) no-repeat center center;
    background-size: 0.32rem 0.32rem;
    position: absolute;
    top: 0;
    right: 0.24rem;
}
.search-box .right{
    color: #02affe;
    font-size: 0.34rem;
    height: 0.7rem;
    line-height: 0.7rem;
}
.search-list li{
    margin-bottom: 0.3rem;
    background: #fff;
    box-sizing: border-box;
    padding:0.3rem 0 0.3rem 0.38rem;
    border-radius: 0.3rem;
    position: relative;
}
.search-img{
    width: 1.6rem;
    height: 2.14rem;
    border-radius: 0.2rem;
}
.search-con{
    padding: 0.16rem 0 0 0.38rem;
    width: 4.1rem;
    word-wrap: break-word;
    word-break: normal;
}
.search-con h4{
    font-weight: bold;
    color: #000;
    line-height: 1;
    font-size: 0.36rem;
}
.search-con p{
    font-size: 0.26rem;
    padding-top: 0.22rem;
    color: #666;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>